<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./inputTags.min.css">
  <script src="./inputTags.min.js"></script>
  <script src="./jq.js"></script>
</head>

<body>
  <h1>回车生成标签</h1>
  <div>min文件为压缩文件，普通文件中有详细注释</div>
  <div id="tags">

  </div>
  <script type="text/javascript">
    /**
     * 参数说明
     * @param elem                      (必填参数) 触发对象的id/class/tag
     * @param content                   数据源,需要显示的数据
     * @param inputType                 输入框类型
     * @param theme                     标签背景颜色
     * @param placeholder               input框的水印（提示文字）
     * @param regular                   正则验证。不填写改参数这不开启验证
     *        regular =>  rule          正则验证规则，支持自己输入表达式，或者使用内置验证（mobile手机、email邮箱、no_chinese非中文）
     *        regular =>  err_callback  验证失败回调 （code 错误代码  msg 错误提示）
     * @param beforeEnter               在回车之前判断的函数，可以使用return false阻止回车时间
     * @param afterEnter                回车后的回调函数，返回当前框所有的值
     */

    /**
     * 函数说明(实例化之后才可用)
     * @function clearAll()       参数 无参                   清空输入框标签
     * @function reload()         参数 一维数组               重新渲染输入框的标签，每次重新渲染都会清除旧数据
     * @function getValue()       参数 无参                   获取输入框中的标签
     * @function on()             参数 操作类型,回调方法       目前操作类型只有 delTag 再删除标签后的回调方法
     */

    var tags = new inputTags({
      elem: '#tags',
      content: ['1', '2', '3', '4', '5'],
      inputType: 'text',
      theme: '#FFB800',
      placeholder: 'input的水印',
      regular: {
        rule: 'mobile',
        err_callback: function(res) {
          alert(res.msg);
        }
      },
      beforeEnter: function() {
        // 可以使用 return false 阻止生成标签
      },
      afterEnter: function(res) {
        console.log(res);
      }
    })

    // 清空所有的选择
    tags.clearAll();

    // 重新渲染指定的数组。使用该方法会把旧数据清除
    tags.reload(['5', '7', '9', '10'])

    // 外部获取当前的标签
    console.log(tags.getValue(), '获取所有标签')

    // 监听删除标签
    tags.on('delTag', function(res) {
      console.log('再删除标签后拿到最新的值', res)
    })
  </script>

</body>


</html>